<template>
  <div>
    <div>
      <el-form-item label="小区名称：" class="inlineCt" prop="communityName">
        <el-input id="pickerInput" v-model="keyWord" class="input300" placeholder="请输入关键字选点" />
      </el-form-item>
    </div>
    <div>
      <div id="mapContainer" style="width: 700px;height: 300px;margin: 0 auto;">正在加载数据 ...</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import remoteLoad from './remoteLoad'
import { MapKey, MapCityName } from './mapConfig'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    lat: {
      type: String,
      default: ''
    },
    lng: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      autocomplete: null,
      placeSearch: null,
      dragStatus: false,
      AMapUI: null,
      AMap: null
    }
  },
  computed: {
    keyWord: {
      get: function() {
        return this.value
      },
      set: function(newVal) {
        this.$emit('input', newVal)
      }
    }
  },
  methods: {
    // 搜索
    handleSearch() {
      // if (this.keyWord) {
      //   this.placeSearch.search(this.keyWord)
      // }
    },
    // 实例化地图
    initMap() {
      let that = this
      // 加载PositionPicker,loadUI的路径参数为模块名中 'ui/' 之后的部分
      let AMapUI = (this.AMapUI = window.AMapUI)
      let AMap = (this.AMap = window.AMap)
      AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
        let mapConfig = {
          zoom: 16
        }
        if (this.lat && this.lng) {
          mapConfig.center = [this.lng, this.lat]
        }
        let map = new AMap.Map('mapContainer', mapConfig)
        AMap.plugin('AMap.Autocomplete', function() {
          // 实例化Autocomplete
          var autoOptions = {
            // input 为绑定输入提示功能的input的DOM ID
            input: 'pickerInput',
            datatype: 'all'
          }
          var autoComplete = new AMap.Autocomplete(autoOptions)

          AMap.event.addListener(autoComplete, 'select', select) //注册监听，当选中某条记录时会触发
          function select(e) {
            console.log(e)
            map.setCenter([e.poi.location.lng, e.poi.location.lat])
            that.$emit('selectSucc', e)
            that.$emit('input', e.poi.name)
          }
        })
        // 启用工具条
        AMap.plugin(['AMap.ToolBar'], function() {
          map.addControl(
            new AMap.ToolBar({
              position: 'RB'
            })
          )
        })
        // 创建地图拖拽
        let positionPicker = new PositionPicker({
          mode: 'dragMap', // 设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap'
          map: map // 依赖地图对象
        })
        // 拖拽完成发送自定义 drag 事件
        positionPicker.on('success', positionResult => {
          // 过滤掉初始化地图后的第一次默认拖放
          if (!this.dragStatus) {
            this.dragStatus = true
          } else {
            // this.$emit('drag', positionResult)
            // this.$emit('input', positionResult.address)
          }
        })
        // 启动拖放
        positionPicker.start()
      })
    }
  },
  async mounted() {
    let that = this
    if (window.AMap && window.AMapUI) {
      // 已载入高德地图API,则直接初始化地图
      that.initMap()
    } else {
      // 未载入高德地图API,则先载入API再初始化
      window.mapUISucc = function() {
        that.initMap()
      }
      window.mapSucc = function() {
        remoteLoad(`https://webapi.amap.com/ui/1.1/main.js`, window.mapUISucc)
      }
      remoteLoad(
        `https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}&callback=mapSucc`
      )
    }
  }
}
</script>

<style scoped>
</style>
